<nz-skeleton [nzActive]="true" [nzLoading]="loading">
  <ng-container *ngIf="!projects.length">
    <div class="no-data-img-holder mx-auto mb-3">
      <img src="/assets/images/empty-box.webp" class="img-fluid" alt="">
    </div>
    <div class="text-center mb-3">
      <span nz-typography class="no-data-text">您尚未分配到任何项目。因此，您无法创建任务或查看任务。</span>
    </div>
  </ng-container>
  <ng-container *ngIf="projects.length">
    <worklenz-task-add-container
      *ngIf="homePageService.tasksViewConfig?.current_tab === 'All'" [isPersonal]="false"></worklenz-task-add-container>
    <nz-table class=" mt-2">
      <tr style="background: #fafafa;">
        <th class="tasks-td name-td">任务</th>
        <th class="tasks-td project-td pe-0">项目</th>
        <th class="tasks-td status-td ps-0">状态</th>
        <th class="tasks-td due-date-td">截止日期</th>
      </tr>
    </nz-table>
    <nz-table
      class="custom-table homepage-table">
      <tr *ngFor="let task of homePageService.tasksModel?.tasks; trackBy: trackBy;" class="actions-row">
        <td class="tasks-td name-td">
          <worklenz-task-name [task]="task" (onOpenTask)="openTask(task)"></worklenz-task-name>
        </td>
        <td *ngIf="task.is_task" class="tasks-td project-td pe-0">
          <worklenz-task-project [task]="task"></worklenz-task-project>
        </td>
        <td *ngIf="task.is_task" class="tasks-td status-td ps-0">
          <worklenz-task-status [task]="task"></worklenz-task-status>
        </td>
        <td *ngIf="task.is_task" class="tasks-td due-date-td">
          <worklenz-task-due-date [task]="task"></worklenz-task-due-date>
        </td>
      </tr>
    </nz-table>
    <ng-container *ngIf="homePageService.tasksModel.tasks.length === 0">
      <div class="no-data-img-holder mx-auto mb-3">
        <img src="/assets/images/empty-box.webp" class="img-fluid" alt="">
      </div>
      <div class="text-center mb-3">
        <span nz-typography class="no-data-text">没有任务可显示。</span>
      </div>
    </ng-container>
  </ng-container>
</nz-skeleton>

<worklenz-task-view
  [(show)]="showTaskModal"
  (showChange)="onShowChange($event)"
  [projectId]="selectedTask?.project_id || null"
  [taskId]="selectedTask?.id || null"
></worklenz-task-view>
